<template>
  <u-navbar :is-back="false" :border-bottom="props.border" is-fixed="true">
    <view class="navbar_content flex-space-between">
      <view class="left">
        <view class="logo_text" v-if="props.isLogo">
        	<image  class="logo" src="../../../static/logo.png"></image>
			<text>门球赛事</text>
        </view>
        <view class="back flex-center" @click="backClick" v-if="props.isBack">
          <image src="../../../static/icon/01.png"></image>
        </view>
      </view>
      <view class="right" :style="props.isBack ? 'width: calc(100vw - 90rpx);' : 'width:100vw'">
        {{ title }}
      </view>
    </view>
  </u-navbar>
</template>

<script setup lang="ts">
import tools from '../../utils/tools'
const props = defineProps({
  title: {
    type: String,
    default() {
      return ''
    }
  },
  isLogo: {
    type: Boolean,
    default() {
      return false
    }
  },
  isBack: {
    type: Boolean,
    default() {
      return false
    }
  },
  border: {
    type: Boolean,
    default() {
      return false
    }
  }
})

const backClick = () => {
  tools.navTo('', 2)
}
</script>

<style lang="scss" scoped>
.navbar_content {
  width: 100%;
  .left {
    display: flex;
    align-items: center;
	.logo_text{
		display: flex;
		align-items: center;
		text{
			width: 346rpx;
			height: 50rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 50rpx;
			margin-left: 12rpx;
			color: #000000;
			opacity: 1;
		}
	}
    .logo {
      width: 80rpx;
      height: 76rpx;
      margin-left: 24rpx;
    }
    .back {
      width: 100%;
      height: 30rpx;
      padding-left: 32rpx;
      image {
        width: 14rpx;
        height: 28rpx;
      }
    }
  }
  .right {
    // border: 1px solid #000;
    display: block;
    // width: calc(100vw -68rpx);
    // width: 216rpx;
    // width: 100vw;
    // margin-left: 60rpx;
    font-size: 36rpx;
    text-align: center;
    // margin-right: 57rpx;
  }
}
</style>
